<%@ page language="java"  pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新冠肺炎疫情信息平台</title>
  <!-- 引入外部标签 -->
  <link rel="stylesheet" href="css/epidemic.css">
</head>
<body>
     <!-- 1.title -->
     <div id="title">
        <span class="china_title">全国疫情信息</span>&nbsp;&nbsp;<a href="#" class="world_title">全球疫情信息</a>
     </div>
     <!-- 2.时间，当前系统时间 -->
     <div id="time">2021年1月27日星期三16:48:35</div>
     <!-- 3.left1 -->
     <div id="left1">left-1</div>
     <!-- 4.left2 -->
     <div id="left2">left-2</div>
     <!-- 5.mid1 -->
     <div id="mid1">
        <div class="num">
            <h1>8991</h1>
        </div>
        <div class="num">
            <h1>151515</h1>
        </div>
        <div class="num">
            <h1>8888</h1>
        </div>
        <div class="num">
            <h1>17690</h1>
        </div>
        <div class="txt">
           <h2>现存确诊</h2>
        </div>
        <div class="txt">
           <h2>累计确诊</h2>
        </div>
        <div class="txt">
           <h2>治愈</h2>
        </div>
        <div class="txt">
           <h2>死亡</h2>
        </div>
     </div>
     <!-- 6.mid2 -->
     <div id="mid2">
         <div id="china_map"> </div>
     </div>
     <!-- 7.right1 -->
     <div id="right1">
      right-1
     </div>
     <!-- 8.right2 -->
     <div id="right2">
     right-2
     </div>
     <!-- 9.footer-->
     <footer>
     Copyright © 2021bochensong. All rights reserved.
     </footer>
</body>
 <script src="js/echarts.min.js"></script>
 <script src="js/echarts-wordcloud.min.js"></script>
 <script src="js/china.js"></script>
 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('right1'),'dark');

        // 指定图表的配置项和数据
        var option = {
            color:["#54A1D5"],
            title: {
                text: '全国确诊省市Top5',
              
            },
            tooltip: {
            	trigger:'axis',
            	
            },
            legend: {
                data:['累计确诊']
            },
            xAxis: {
                data: [
                	<c:forEach items="${list5}" var="pro">
                	["${pro.provinceName}"],
                	</c:forEach>
    	      ]   
            },
            yAxis: {},
            series: [{
                name: '累计确诊',
                type: 'bar',
                data: [
                	<c:forEach items="${list5}" var="pro">
	            	{value: "${pro.confirmedCount}", name: '${pro.provinceName}'},
	            	</c:forEach>
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('left1'),'dark');

// 指定图表的配置项和数据
var option = {
	    title: {
	        text: ''
	    },
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        data: ['现存确诊', '累计确诊', '治愈', '死亡']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['1.22', '2.16', '3.18', '4.15', '5.20', '6.2', '7.10']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            name: '现存确诊',
	            type: 'line',
	            stack: '总量',
	            data: [88888,75287, 82772, 75758, 25257,52552,25252]
	        },
	        {
	            name: '累计确诊',
	            type: 'line',
	            stack: '总量',
	            data: [789589, 585778, 578798, 5587695, 587567,587758, 58757]
	        },
	        {
	            name: '治愈',
	            type: 'line',
	            stack: '总量',
	            data: [575857, 587577, 587577, 87577, 58757,57575, 57857]
	        },
	        {
	            name: '死亡',
	            type: 'line',
	            stack: '总量',
	            data: [5782872, 33387, 301272, 28772, 2727827, 278278, 28727]
	        },
	    ]
	};
myChart.setOption(option);
</script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('left2'),'dark');

// 指定图表的配置项和数据
var option = {
	    title: {
	        text: '境外输入省市Top5',
	        left: '%25'
	    },
	    tooltip: {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data:[
	        	<c:forEach items="${list}" var="pro">
            	["${pro.provinceName}"],
            	</c:forEach>
	      ]
	    },
	    series: [
	        {
	            name: '现存确诊',
	            type: 'pie',
	            radius: '50%',
	            data: [
	            	<c:forEach items="${list}" var="pro">
	            	{value: "${pro.currentConfirmedCount}", name: '${pro.provinceName}'},
	            	</c:forEach>
	                /*{value: 1048, name: '上海'},
	                {value: 735, name: '北京'},
	                {value: 580, name: '石家庄'},
	                {value: 484, name: '深圳'},
	                {value: 300, name: '山西'}*/
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
myChart.setOption(option);
</script>
<script>
var myChart = echarts.init(document.getElementById('right2'),'dark');
option = {
    title:{
    	 text:'今日热搜',
    	 x:'left',
    	 textStyle:{
    		 color:'white'
    	 }
    },
    tooltip:{
    	show:true
    },
    series: [{
        type: 'wordCloud',

        shape: 'circle',
      
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        
        sizeRange: [12, 60],

       
        rotationRange: [-90, 90],
        rotationStep: 45,

       
        gridSize: 8,

       
        drawOutOfBound: false,

        
        layoutAnimation: true,

        textStyle: {
        	normal:{
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            
            color: function () {
                
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
            }
        	}
        },
        emphasis: {
            focus: 'self',

            textStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },

        // Data is an array. Each array item must have name and value property.
        data: [{
            name: 'lbwnb',
            value: 366,
            // Style of single text
            textStyle: {
            }
        },
        {
            name: 'dasdas',
            value: 366,
            // Style of single text
            textStyle: {
            }
        },
        {
            name: 'dsadsad',
            value: 366,
            // Style of single text
            textStyle: {
            }
        }]
    }]
};
myChart.setOption(option);
</script>
<script>
var myChart = echarts.init(document.getElementById('mid2'),'dark');
data=[{
	'name':'上海','value':8887	
},
{
	'name':'山西','value':4884
},
{
	'name':'河北','value':4848	
},
{
	'name':'黑龙江','value':1818	
},
{
	'name':'河南','value':8784	
},
{
	'name':'安徽','value':7848
},
];
var option = {
		title:{
			text:'中国疫情图',
			left:'center'	
		},
		tooltip:{
			trigger:'item'
		},
		visualMap: { // 左侧小导航图标
	        show: true,
	        x: 'left',
	        y: 'bottom',
	        textStyle: {
	            fontSize: 8,
	            color:'white'
	        },
	        splitList: [{ start: 1,end: 9 },
	            {start: 10, end: 99 }, 
				{ start: 100, end: 999 },
	            {  start: 1000, end: 9999 },
	            { start: 10000 }],
	        color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
	    },
	    series: [{
	        name: '累计确诊人数',
	        type: 'map',
	        mapType: 'china',
	        roam: false, // 禁用拖动和缩放
	        itemStyle: { // 图形样式
	            normal: {
	                borderWidth: .5, //区域边框宽度
	                borderColor: '#009fe8', //区域边框颜色
	                areaColor: "#ffefd5", //区域颜色
	            },
	            emphasis: { // 鼠标滑过地图高亮的相关设置
	                borderWidth: .5,
	                borderColor: '#4b0082',
	                areaColor: "#fff",
	            }
	        },
	        label: { // 图形上的文本标签
	            normal: {
	                show: true, //省份名称
	                fontSize: 8,
	            },
	            emphasis: {
	                show: true,
	                fontSize: 8,
	            }
	        },
	        data:data
	    }]
};
myChart.setOption(option);
</script>




</html>